<template>
  <div style="background-color: #fff; min-height: calc(100vh)">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="state.name"
          name="收货人"
          label="收货人"
          clearable
          placeholder="收货人"
          required
        />
        <van-field
          v-model="state.phone"
          required
          name="手机号码"
          clearable
          label="手机号码"
          placeholder="输入你的手机号码"
        />
        <van-field
          v-model="state.value"
          readonly
          clickable
          required
          name="picker"
          label="地址信息"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-action-sheet v-model="showPicker">
          <van-picker
            ref="picker"
            :show-toolbar="true"
            :columns="geosList"
            required
            value-key="name"
            @change="onAreaChange"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-action-sheet>
        <van-field
          v-model="state.addr"
          required
          name="详细地址"
          label="详细地址"
          clearable
          placeholder="详细地址"
        />
        <van-field name="switch" label="设置为默认收货地址" label-width="155px">
          <template #input>
            <van-switch
              v-model="state.is_default"
              inactive-value="0"
              active-value="1"
              active-color="#009697"
              size="24"
            />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin-top: 53px">
        <van-button block native-type="submit">保存收货人信息</van-button>
        <van-button
          v-if="this.state.address_id"
          block
          @click="handleDel"
          native-type="button"
        >删除收货人地址</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { handleTree } from '@/utils'
import { areaList } from '@vant/area-data'
import { geosList } from '@/api/user'
import { addAddress, saveAddress, delAddress } from '@/api/mine/personal'
export default {
  data() {
    return {
      geosList: [],
      state: {
        address_id: null,
        name: null,
        phone: null,
        province: null,
        city: null,
        town: null,
        addr: null,
        is_default: null,
        value: null
      },
      searchResult: [],
      areaList,
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      geosIndex1: 0,
      geosIndex2: 0,
      geosIndex3: 0,
      fillObj: [
        {
          code: '',
          depth: 3,
          name: '',
          parent: '',
          sort: 0
        },
        {
          code: '',
          depth: 3,
          name: '',
          parent: '',
          sort: 0
        }
      ]
    }
  },

  computed: {
    // geosList() {
    //   const geosList = handleTree(this.$store.getters.geosList, 'code')
    //   geosList.map(b => {
    //     b.text = b.name
    //   })
    //   return geosList
    // }
  },

  mounted() {
    this.geos()
    this.fetchList()
  },

  methods: {
    geos() {
      geosList().then(res => {
        const arr = handleTree(res.data, 'code')
        arr.map(b => {
          b.text = b.name
        })
        this.geosList = arr
      })
    },
    fetchList() {
      if (this.$route.query.row) {
        const row = JSON.parse(decodeURIComponent(this.$route.query.row))
        this.state = {
          address_id: row.id,
          name: row.name,
          phone: row.phone,
          province: row.province,
          city: row.city,
          town: row.town,
          addr: row.addr,
          is_default: row.is_default + '',
          value: row.province_name + row.city_name + row.town_name
        }
      } else {
        this.state = {
          address_id: null,
          name: null,
          phone: null,
          province: null,
          city: null,
          town: null,
          addr: null,
          is_default: null,
          value: null
        }
      }
    },
    //当地区选择变化时
    onAreaChange(picker, values, index) {
      if (index == 0) {
        this.geosIndex1 = picker.getColumnIndex(index)
      } else if (index == 1) {
        this.geosIndex2 = picker.getColumnIndex(index)
        if (this.geosList[this.geosIndex1].children[this.geosIndex2].children) {
        } else {
          picker.setColumnValues(2, this.fillObj)
        }
      }
    },
    // 选择地区
    onConfirm(value) {
      this.state.value = value
      const data = this.$refs.picker.getValues()
      this.state.province = data[0].code
      this.state.city = data[1].code
      this.state.town = data[2].code
      this.showPicker = false
    },
    // 保存
    onSubmit(values) {
      if (this.state.address_id) {
        saveAddress(this.state).then(res => {
          Toast.success(res.msg)
          this.$router.go(-1)
        })
      } else {
        addAddress(this.state).then(res => {
          Toast.success(res.msg)
          this.$router.go(-1)
        })
      }
    },
    // 删除
    handleDel() {
      Dialog.confirm({
        title: '提示',
        message: '确定要删除该收货地址吗？'
      })
        .then(() => {
          const data = {
            address_id: this.state.address_id
          }
          return delAddress(data)
        })
        .then(res => {
          Toast.success(res.msg)
          this.$router.go(-1)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell-group--inset {
  margin: 0px !important;
}
::v-deep .van-form {
  .van-cell {
    height: 50px;
    align-items: center;
  }
  .van-cell__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
  }
  .van-cell__value {
    font-size: 15px;
  }
  .van-button {
    display: block;
    margin: auto;
    width: 90%;
    height: 45px;
    background: #009697;
    border-radius: 5px;
    border: 0.02667rem solid #009697;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
  }
  .van-button:nth-child(2) {
    margin-top: 15px;
    color: #ff0000;
    background: #fff;
    border: 1px solid #ff0000;
  }
}
::v-deep .van-field__error-message {
  display: none;
}
</style>
